<template>
  <el-menu
    :default-active="'/index'"
    router
    mode="horizontal"
    class="header">
    <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
      {{ item.navItem }}
    </el-menu-item>
    <a href="" class="my">我的</a>
    <i class="el-icon-user-solid icon"></i>
    <span class="title">教考分离系统</span>
  </el-menu>
</template>

<script>
export default {
  name: 'NavMenuStudent',
  data () {
    return {
      navList: [
        {name: '/student/exam', navItem: '我的考试'},
        {name: '/student/scoreList', navItem: '我的成绩'},
        {name: '/student/bank', navItem: '我的题库'}
      ]
    }
  }
}
</script>

<style scoped>
  .header{
    min-width: 1300px;
    text-color: #222;
    position: fixed;
    top:0;
    width: 100%;
    height: 60px;
    z-index: 1000;
  }
  a{
    text-decoration: none;
  }

  span {
    pointer-events: none;
  }

  .my {
    color: #222;
    float: right;
    padding: 20px;
  }

  .title {
    position: absolute;
    padding-top: 20px;
    right: 46%;
    font-size: 20px;
    font-weight: bold;
  }

  .icon {
    float:right;
    font-size: 30px;
    color: #222;
    padding-top: 15px;
  }
</style>
